<template>
  <div :class="`z-title ${!!more ? 'flex-c-b' : 'flex-c-c'}`">
    <p class="title"><span>·</span>{{ content }} <span>·</span></p>
    <div v-if="!!more" class="link" @click="routeTo">{{ more }}</div>
  </div>
</template>

<script>
export default {
  name: "z-title",
  components: {
  },
  props: {
    content: {
      type: String,
      default: ""
    },
    // 传more为左右布局，不传为居中
    more: {
      type: String,
      default: ""
    },
    link: {
      type: String,
      default: ""
    }
  },
  data () {
    return {

    }
  },
  created () {
  },
  methods: {
    routeTo () {
      if (this.link) { this.$router.push(this.link) }
    }
  }
}

</script>
<style scoped lang='scss'>
.z-title {
  .title {
    font-size: 30px;
    font-weight: 700;
    color: $header_color;
    span {
      font-weight: 700;
    }
  }
}
</style>